* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: skyblue;
}

.main {
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 150px);
  width: 200px;
  height: 300px;
  /* border: 3px solid black; */
  transform: rotate(-90deg);
}

.contain {
  position: relative;
  width: 100%;
  height: 100%;
  /* border: 3px solid red; */

  /* 使被转换的子元素保留其 3D 转换 */
  transform-style: preserve-3d;

  animation: run 10s linear infinite;
}

.contain .item {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
}

.contain .item:nth-child(1) {
  background-color: pink;
}

.contain .item:nth-child(2) {
  background-color: sandybrown;
  transform: rotateX(45deg);
}

.contain .item:nth-child(3) {
  background-color: thistle;
  transform: rotateX(-45deg);
}

.contain .item:nth-child(4) {
  background-color: bisque;
  transform: rotateX(90deg);
}

.contain .item:nth-child(5) {
  background-color: darksalmon;
  transform: rotateX(0deg);
}

@keyframes run {
  0% {
    /*  perspective属性设置镜头到元素平面的距离。 */
    transform: perspective(1000px) rotateX(0deg);
  }
  100% {
    transform: perspective(1000px) rotateX(360deg);
  }
}
